/**
 * Created by 16020025 on 2017/5/2.
 */
new Vue({
    el:'#app',
    data: {
        message:'Hello World!'
    }
});
var app2 = new Vue({
    el: '#app2',
    data: {
        message: '页面加载于 ' + new Date()
    }
})
var app3 = new Vue({
    el: '#app-3',
    data: {
        seen: false
    }
})

var app4 = new Vue({
    el: '#app-4',
    data: {
        todos: [
            { text: '学习 JavaScript' },
            { text: '学习 Vue' },
            { text: '整个牛项目' }
        ]
    }
})
var app5 = new Vue({
    el: '#app-5',
    data: {
        message: 'Hello Vue.js!',
    },
    methods: {
        reverseMessage: function () {
            this.message = this.message.split('').reverse().join('')
        }
    }
})
var app6 = new Vue({
    el: '#app-6',
    data: {
        message: 'Hello Vue!'
    }
})
// 定义名为 todo-item 的新组件
/*
Vue.component('todo-item', {
    template: '<li>这是个待办项</li>'
})*/
Vue.component('todo-item', {
    // todo-item 组件现在接受一个
    // "prop"，类似于一个自定义属性
    // 这个属性名为 todo。
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
    el: '#app-7',
    data: {
        groceryList: [
            { text: '蔬菜' },
            { text: '奶酪' },
            { text: '随便其他什么人吃的东西' }
        ]
    }
})

var data = { a: 1 }
var vm = new Vue({
    el: '#example',
    data: data,
    created: function () {
        // `this` 指向 vm 实例
        console.log('a is: ' + this.a)
    }
})
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
    // 这个回调将在 `vm.a`  改变后调用
    alert(2);
})
vm.a=9;